import React, { useEffect, useState } from "react";
import Style from "./BuyView.module.scss";
import { NavBar, Space } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { SearchOutline, TruckOutline } from "antd-mobile-icons";
import { bugGoods, buyerShow } from "@/api/buy";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { type } from "os";
type Props = {};
const BuyView = (props: Props) => {
  let navigate = useNavigate();
  // 导航栏右边
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ "--gap": "16px" }}>
        <SearchOutline
          onClick={() => {
            // 点击跳转搜索
            navigate("/search");
            // console.log("搜索页");
          }}
        />
        <TruckOutline
          onClick={() => {
            // 点击跳转购物车
            navigate('/search/searchDeatil');
            // console.log("购物车");
          }}
        />
      </Space>
    </div>
  );

  useEffect(() => {
    bugGoods().then((res) => {
      if (res.data.code === "200") {
        console.log(res.data.data.navList);
        setGoods(res.data.data.navList);
      }
      buyerShow().then((res) => {
        console.log(res.data);
        console.log(res.data.data.result);
        setMoreGoods(res.data.data.result);
      });
    });
  }, []);

  type goods = {
    picUrl: string;
    mainTitle: string;
    viceTitle: string;
    id: number;
  };
  const [goods, setGoods] = useState([]);
  const [moreGoods, setMoreGoods] = useState<any>([]);
  console.log(moreGoods);

  return (
    <div className={Style.wrapper}>
      <div className="top">
        <NavBar
          right={right}
          onBack={() => {
            navigate("/home/recommend");
          }}
        >
          网易严选
        </NavBar>
      </div>
      <div className={Style.background}>
        <img
          className={Style.logo}
          src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
          alt=""
        />
        <div className={Style.font}>严选好物 &nbsp;用心生活</div>
        <div className={Style.nav}>
          {goods &&
            goods.map((val: goods) => {
              return (
                <Swiper className="mySwiper" key={val.id}>
                  <SwiperSlide>
                    <div className={Style.goods}>
                      <img
                        style={{ width: 60, height: 60 }}
                        src={val.picUrl}
                        alt=""
                      />
                      <div style={{ textAlign: "center" }}>{val.mainTitle}</div>
                      <div
                        style={{
                          textAlign: "center",
                          color: "#999",
                          fontSize: ".2rem",
                        }}
                      >
                        {val.viceTitle}
                      </div>
                    </div>
                  </SwiperSlide>
                </Swiper>
              );
            })}
        </div>
      </div>
      {!!moreGoods.length &&
        moreGoods[0].topics.map((val: any, index: number) => {
          return (
            <div className={Style.buyerShow} key={index}>
              <div className={Style.more}>
                <div>
                  <img className={Style.picUrl} src={val.picUrl} alt="" />
                </div>
                <div className={Style.title}>{val.title}</div>

                <div className={Style.left}>
                  <img className={Style.avatar} src={val.avatar} alt="" />
                  <span className={Style.nickname}>{val.nickname}</span>
                </div>
              </div>
            </div>
          );
        })}
      {!!moreGoods.length &&
        moreGoods[1].topics.map((val: any, index: number) => {
          console.log(val.topics);
          return (
            <div className={Style.buyerShow} key={index}>
              <div className={Style.more}>
                <div>
                  <img className={Style.picUrl} src={val.picUrl} alt="" />
                </div>
                <div className={Style.title}>{val.title}</div>

                <div className={Style.left}>
                  <img className={Style.avatar} src={val.avatar} alt="" />
                  <span className={Style.nickname}>{val.nickname}</span>
                </div>
              </div>
            </div>
          );
        })}
    </div>
  );
};

export default BuyView;
